<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 底部自定义tabbar
import TabBar from '@/components/tabbar/index.vue'
//商品排行组件
import roductRanking from './components/roduct-ranking.vue'
//引入消息推送icon组件
import messagePush from '@/basePackage/pages/messagepush/components/icon-push.vue'
//引入api
//引入api 获取当月的交易量 和当月交易额
import { getMonthTransactionVolume, getProductRanking } from '@/apis/overview/index'
import Auth from '@/components/auth/auth.vue'

import { useScrollViewHeight } from '@/hooks'

// 可视区域滑动高度计算
const { scrollViewHeight } = useScrollViewHeight()

//定义商品排行数据列表
const shoplist = reactive({
    list: [],
})

//定义当前交易额 交易量
const realTradeVolume = ref('')
const realTradingVolume = ref('')
//商品排行数据
const datalist = reactive([
    {
        data: '今天',
        dataindex: 0,
        current: true,
    },
    {
        data: '近7天',
        dataindex: 1,
        current: false,
    },
    {
        data: '近1月',
        dataindex: 2,
        current: false,
    },
])
//交易概况选择按钮
const show = ref(false)
//显示月份
interface ShowMonth {
    year: string
    month: string
}
const showMonth = reactive<ShowMonth>({
    year: '2022',
    month: '12',
})

onLoad(async () => {
    uni.$emit('updateTitle')
    //获得当前月份
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    showMonth.year = year + ''
    showMonth.month = month + ''
    getTransactionVolume()
    await handleChangeTab(datalist[2], 2)
})

/**
 * 商品排行切换日期
 * @param {*} e
 */
interface TabItem {
    data: string
    dataindex: number
    current: boolean
}
//定义枚举类型 用于商品排行切换日期
enum DataType {
    TODAY,
    NEARLY_A_WEEK,
    NEARLY_A_MONTH,
}
const handleChangeTab = async (item: TabItem, index = 0) => {
    //切换日期
    datalist.forEach((item) => {
        item.current = false
    })
    if (item.dataindex === index) {
        item.current = true
    }
    getRanking({ dataType: DataType[index] })
}
/**
 * 请求商品排行数据
 */
const getRanking = async (params: { dataType: string }) => {
    const data = await getProductRanking(params)
    //ifcode=200 说明请求成功
    if (data.code === 200) {
        shoplist.list = data.data
    } else {
        shoplist.list = []
        uni.showToast({
            title: data.msg || '暂无数据',
            icon: 'none',
            duration: 2000,
        })
    }
    console.log(data)
}
/**
 * 年月选择回调
 * @returns {*} 到时候在这里请求数据
 */
const handleSelect = async (date) => {
    showMonth.month = date.month
    showMonth.year = date.year
    getTransactionVolume()
}
/**
 * 获取交易概况数据
 */
const getTransactionVolume = async () => {
    let day = showMonth.year + '-' + showMonth.month

    const { data } = await getMonthTransactionVolume(day)
    if (data) {
        realTradeVolume.value = data.realTradeVolume
        realTradingVolume.value = data.realTradingVolume
    } else {
        realTradeVolume.value = '0'
        realTradingVolume.value = '0'
    }
}
/**
 * 获取商品排行数据
 */
</script>

<template>
    <scroll-view :scroll-y="true" :style="{ height: `${scrollViewHeight}` }">
        <view class="content">
            <view class="content__top">
                <!-- 消息推送和欢迎归来区域 -->
                <view class="content__top--title title">
                    <view class="title__left">
                        <u-picker
                            v-model="show"
                            mode="time"
                            :params="{
                                year: true,
                                month: true,
                                day: false,
                                hour: false,
                                minute: false,
                                second: false,
                            }"
                            @confirm="handleSelect"
                        ></u-picker>
                        <view class="dayselector">
                            <view class="dayselector__year" @click="show = true"
                                >{{ showMonth.year }}-{{ showMonth.month }}
                                <u-icon name="arrow-down" color="#101010" size="14"></u-icon>
                            </view>
                        </view>
                    </view>
                    <message-push></message-push>
                </view>
                <!-- 交易概况区域 -->
                <view class="content__top--data data">
                    <view class="data__top">
                        <view class="data__top--left">交易概况</view>
                        <view class="data__top--right"></view>
                    </view>
                    <view class="data__bottom">
                        <view class="data__bottom--left">
                            <view class="top-title">成交额（元）</view>
                            <view class="bottom-title">{{ (Number(realTradingVolume) / 10000).toFixed(2) }}</view>
                        </view>
                        <view class="data__bottom--right">
                            <view class="top-title">成交量（笔）</view>
                            <view class="bottom-title">{{ realTradeVolume }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 商品排行区域 -->
            <view class="content__bottom">
                <view class="content__bottom--tab tab">
                    <view class="tab__title">商品排行</view>
                    <view class="tab__dataselector">
                        <template v-for="(item, index) in datalist" :key="item.data">
                            <view
                                class="tab__dataselector--data"
                                :dataset-id="index"
                                :class="datalist[index].current ? 'activedata' : ''"
                                @click="($event) => handleChangeTab(item, index)"
                                >{{ item.data }}
                            </view>
                        </template>
                    </view>
                </view>
                <scroll-view class="content__bottom--shoplist" scroll-y="true">
                    <view class="">
                        <template v-if="shoplist.list.length">
                            <view v-for="item in shoplist.list" :key="item"> <roduct-ranking :list="item"></roduct-ranking></view>
                        </template>
                        <template v-else>
                            <view>暂无数据</view>
                        </template>
                    </view>
                </scroll-view>
            </view>
        </view>
    </scroll-view>
    <!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
    <TabBar></TabBar>
    <Auth></Auth>
</template>

<style lang="scss" scoped>
@include b(content) {
    display: flex;
    flex-direction: column;
    @include e(top) {
        height: 696rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        @include m(title) {
            display: flex;
            justify-content: space-between;
            //ios上面顶部被导航栏遮挡
        }
        @include m(data) {
            width: 650rpx;
            height: 400rpx;
            line-height: 40rpx;
            border-radius: 50rpx;
            background: linear-gradient(0deg, rgba(71, 85, 233, 1) 1.6%, rgba(94, 128, 254, 1) 100%);
            text-align: center;
        }
    }
    @include e(bottom) {
        flex: 1;
        // height: 522rpx;
        border-radius: 50rpx 50rpx 0 0;
        background-color: rgba(252, 252, 252, 1);
        color: #101010;
        font-size: 28rpx;
        text-align: center;
        font-family: Arial;
        padding: 54rpx 62rpx 0 50rpx;
        @include m(shoplist) {
            height: 344rpx;
        }
    }
}
@include b(title) {
    // margin-top: 100rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 650rpx;
    height: 200rpx;
    @include e(left) {
        font-weight: 900;
        color: rgba(51, 51, 51, 1);
        font-size: 40rpx;
        font-family: AlibabaSans-regular;
        flex: 1;
    }
}
@include b(data) {
    color: rgba(255, 255, 255, 1);
    font-family: AlibabaSans-regular;
    padding-left: 56rpx;
    padding-top: 42rpx;
    @include e(top) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        @include m(left) {
            font-size: 32rpx;

            height: 52rpx;
        }
        @include m(right) {
            width: 28rpx;
            height: 28rpx;
            border: 6rpx solid rgba(255, 255, 255, 1);
            border-radius: 28rpx;
            margin-right: 54rpx;
        }
    }
    @include e(bottom) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 128rpx;
        text-align: left;
        @include m(left) {
        }
        @include m(right) {
            margin-right: 40rpx;
        }
    }
}
@include b(tab) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 62rpx;
    @include e(title) {
        font-size: 32rpx;
        font-weight: 700;
    }
    @include e(dataselector) {
        display: flex;
        @include m(data) {
            width: 92rpx;
            height: 64rpx;
            line-height: 64rpx;
            border-radius: 116rpx;
            background-color: rgba(255, 255, 255, 1);
            color: #101010;
            font-size: 28rpx;
            text-align: center;
            box-shadow: 0 4rpx 22rpx 0 rgba(246, 246, 246, 40);
            font-family: Arial;
            margin-left: 38rpx;
            font-weight: 700;
        }
    }
}
@include b(dayselector) {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    @include e(year) {
        font-size: 36rpx;
    }
}

@include b(top-title) {
    font-size: 24rpx;
    height: 38rpx;
    line-height: 38rpx;
}
@include b(bottom-title) {
    font-size: 48rpx;
    height: 76rpx;
    line-height: 76rpx;
}
@include b(activedata) {
    background-color: rgba(71, 85, 233, 1);
    color: rgba(255, 255, 255, 1);
}
</style>
